<template>
  <div id="myChart"></div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: "StopPoint",
    mounted: function () {
      const that = this;
      this.getData();
    },
    methods:{
      getData(){
        const that=this;
        const loading = this.$loading({
          lock: true,
          text: '请求轨迹数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        axios.get("http://localhost:8089/try/car/cluster").then(function (result) {
          if(result.data.length>0){
            let data=result.data;
            let points=[];
            for (let i = 0; i <data.length ; i++) {
              let j=i+1;
              points.push({name:"top_"+j,value:[data[i].lng.toFixed(2),data[i].lat.toFixed(2),data[i].num]})
            }
            that.showChart(points);
          }
        }).catch(function (err) {
          console.log(err)
        }).finally(function () {
          loading.close();
        })
      },
      showChart(data){
        let myChart = echarts.init(document.getElementById('myChart'));
        myChart.setOption({
          title: {
            // text: '停留点识别',
            // subtext: '',
            // sublink: '',
            left: 'center'
          },
          tooltip : {
            trigger: 'item'
          },
          bmap: {
            center: [116.46, 39.92],
            zoom: 10,
            roam: true,
            mapStyle: {
              styleJson: [{
                'featureType': 'water',
                'elementType': 'all',
                'stylers': {
                  'color': '#d1d1d1'
                }
              }, {
                'featureType': 'land',
                'elementType': 'all',
                'stylers': {
                  'color': '#f3f3f3'
                }
              }, {
                'featureType': 'railway',
                'elementType': 'all',
                'stylers': {
                  'visibility': 'off'
                }
              }, {
                'featureType': 'highway',
                'elementType': 'all',
                'stylers': {
                  'color': '#fdfdfd'
                }
              }, {
                'featureType': 'highway',
                'elementType': 'labels',
                'stylers': {
                  'visibility': 'off'
                }
              }, {
                'featureType': 'arterial',
                'elementType': 'geometry',
                'stylers': {
                  'color': '#fefefe'
                }
              }, {
                'featureType': 'arterial',
                'elementType': 'geometry.fill',
                'stylers': {
                  'color': '#fefefe'
                }
              }, {
                'featureType': 'poi',
                'elementType': 'all',
                'stylers': {
                  'visibility': 'off'
                }
              }, {
                'featureType': 'green',
                'elementType': 'all',
                'stylers': {
                  'visibility': 'off'
                }
              }, {
                'featureType': 'subway',
                'elementType': 'all',
                'stylers': {
                  'visibility': 'off'
                }
              }, {
                'featureType': 'manmade',
                'elementType': 'all',
                'stylers': {
                  'color': '#d1d1d1'
                }
              }, {
                'featureType': 'local',
                'elementType': 'all',
                'stylers': {
                  'color': '#d1d1d1'
                }
              }, {
                'featureType': 'arterial',
                'elementType': 'labels',
                'stylers': {
                  'visibility': 'off'
                }
              }, {
                'featureType': 'boundary',
                'elementType': 'all',
                'stylers': {
                  'color': '#fefefe'
                }
              }, {
                'featureType': 'building',
                'elementType': 'all',
                'stylers': {
                  'color': '#d1d1d1'
                }
              }, {
                'featureType': 'label',
                'elementType': 'labels.text.fill',
                'stylers': {
                  'color': '#999999'
                }
              }]
            }
          },
          series : [
            {
              name: '停留点',
              type: 'scatter',
              coordinateSystem: 'bmap',
              data: data,
              symbolSize: function (val) {
                return val[2] / 1000;
              },
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: 'purple'
                }
              }
            },
            {
              name: '停留点Top 40',
              type: 'effectScatter',
              coordinateSystem: 'bmap',
              data: data.sort(function (a, b) {
                return b.value[2] - a.value[2];
              }).slice(0, 6),
              symbolSize: function (val) {
                return val[2] / 1000;
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: 'purple',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            }
          ]
        });
        let bmap = myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl());
      },
    }
  }
</script>

<style scoped>

</style>
